<!--  -->
<template>
<div class='Codebox'>
     <header>
        <span @click='goBingding'><van-icon name="arrow-left" /></span>
        <span>验证码</span>
        <span><van-icon name="ellipsis" /></span>
    </header>
    <main>
        <div class="reservedTel">您的预留手机号 {{cardInfo[0].telphone}}</div>
        <div class="getCode">
            <van-password-input
            :value="value"
            :length="4"
            :mask="false"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            />
            <span class="codes" v-if='show' @click='getyzCode'>获取验证码</span>
            <span class="codes" v-if='!show'>{{count}}s重新发送</span>
        </div>
        <div class="codeTime">验证码有效期30分钟</div>
        <div class="nextBtn" @click='toAddBankCard'>
            下一步
        </div>
        <div>
          <van-number-keyboard
                v-model="value"
                :show="showKeyboard"
                :length="4"
                @blur="showKeyboard = false"
            />
        </div>
    </main>
    <div class="dialog" v-if='isDialog'>
        <div class="dialogCon">
            <div class="bding">
                <div>请输入支付密码</div>
            </div>
            <div class="sucess">
                银行卡绑定成功
            </div>
            <div class="sure" @click="sureAdd">
                确定
            </div>
        </div>
    </div>

</div>
</template>

<script>
import {mapState} from "vuex"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
     value: '',
      errorInfo: '',
      showKeyboard: true,
      phone:15802334567,
      yzCode:'',
      isDialog:false,
      timer:null,//倒计时初始值
      count:'',
      show:true
};
},
//监听属性 类似于data概念
computed: {
    ...mapState(['cardInfo'])
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
goBingding(){
    this.$router.go(-1)
},

getyzCode(){//获取验证码
//Math.random().toString(36).slice(2,6) 
    for(let i=0;i<4;i++){
        this.yzCode+=Math.floor(Math.random()*10)
    }
   alert(this.yzCode,'验证码')
   const TIME_COUNT = 60;//倒计时
     if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
           this.count--;
          } else {
           this.show = true;
           clearInterval(this.timer);
           this.timer = null;
          }
        }, 1000)
     }
},
toAddBankCard(){//判断验证码与键盘值是否一致
    if(this.value===this.yzCode&&this.value!==''&&this.yzCode.length===this.value.length){
        this.isDialog=true
    }
},
sureAdd(){//确定绑卡
    this.isDialog=false
    this.$router.push('/bankCard')
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    console.log(this.cardInfo,'xini')
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='scss' scoped>
.Codebox{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
    header{
        height: 3.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.25rem;
        background:#51547d;
        color: #ffffff;
        padding: 0 .9375rem;
    }
    main{
        flex:1;
        height: 100%;
        display: flex;
        flex-direction: column;
         background: #f3f3f3;
        .reservedTel{
            height: 3.125rem;
            line-height: 3.125rem;
            color: #999;
            padding-left: 0.625rem ;
        }
        .getCode{
            height: 3.75rem;
            background: #fff;
            line-height: 3.75rem;
            display: flex;
            .van-password-input{
                width: 12.5rem;
                height: 3.125rem;
                border: 0;
                outline: 0;
                padding-left: .625rem;
            }
            .codes{
                padding-left: 0.625rem ;
            }
        }
        .codeTime{
            height: 3.125rem;
            line-height: 3.125rem;
            padding-left: 0.625rem ;
        }
        .nextBtn{
             display: flex;
            height: 3.125rem;
            background: #51547d;
            justify-content: space-around;
            align-items: center;
            margin: 1.875rem .625rem;
            border-radius: 1.875rem;
            color:#fff;
        }
    }
    .dialog{
          position: fixed;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.8);
            .dialogCon{
                background: #fff;
                width: 18.75rem;
                height: 13.75rem;
                position: fixed;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                border-radius: 1.25rem;
                .bding{
                    display: flex;
                    height:3.75rem;
                    justify-content: space-around;
                    align-items: center;
                    padding: .625rem;
                }
                .sucess{
                    height: 6.875rem;
                    line-height: 6.875rem;
                    text-align: center;
                    border-bottom: .0625rem solid #efefef;
                    border-top: .0625rem solid #efefef;
                }
                .sure{
                    height: 2.5rem;
                    line-height: 2.5rem;
                    text-align: center;
                    color:#68a9e6;
                }
            }
    }
}
</style>